<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>经纪人</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body  style="overflow-x: hidden">
<!-- 导航栏<nav class="navbar navbar-inverse navbar-fixed-top" style="min-height:0; height: 45px"> -->
<nav th:replace="~{topbar::top}"></nav>


<form id="select_form" action="#" th:action="@{/agent_list}"  method="post">
<!-- 图片和搜索框 -->
    <div class="jumbotron" style="padding-top: 40px;  height: 10rem; background-image: url(images/back01.jpg);">
        <div class="container">
            <div class="row" style="text-align: center">
                    <div class="form-group col-md-1">
                        <input type="hidden" id="order" name="order" th:value="${select.order}">
                        <input type="text" style="width: 590px" th:value="${select.agentName}" name="agentName" class="form-control" id="search" placeholder="请输入你要查找的经纪人名称">
                    </div>
                    <button type="submit" class="btn btn-default" aria-label="Left Align">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
            </div>
        </div>
    </div>

<!-- 条件选择区域 -->
<div style=" margin-left:30px; background-color: ghostwhite ">
    <div class="container">
        <div class="row">
            <div class="checkbox" style="display: inline">
                <b style="padding-right: 30px">位置</b>
                <label class="checkbox-inline" style="padding-right: 60px">
                    <input type="checkbox" name="city" value="成都" th:text="成都" th:unless="${select.cityContain('成都')}">
                    <input type="checkbox" name="city" value="成都" th:text="成都" checked="checked" th:if="${select.cityContain('成都')}">
                </label>
                <label class="checkbox-inline" style="padding-right: 60px">
                    <input type="checkbox" name="city" value="广州" th:text="广州" th:unless="${select.cityContain('广州')}">
                    <input type="checkbox" name="city" value="广州" th:text="广州" checked="checked" th:if="${select.cityContain('广州')}">
                </label>
            </div>
            <div class="container" style="text-align: right;">
                <input class="btn btn-primary" type="submit" value="搜索"/>
            </div>
        </div>
    </div>
</div>
</form>

<!-- 列表选项栏 -->
<script>
    function sortByDefault() {
        document.getElementById("order").value="default";
        var form = document.getElementById("select_form");
        form.submit();

    }

    function sortByRank() {
        document.getElementById("order").value="rank";
        var form = document.getElementById("select_form");
        form.submit();
    }
</script>
<div class="container text-center"
     style="padding-top: 30px; padding-bottom:30px; margin: auto; top: 0; bottom: 0; left: 0; right: 0">
    <div class="row">
        <ul>
            <li class="col-md-2" style="list-style: none; background: lightgreen" onclick="sortByDefault(this)" id="paixu" th:if="${select.order eq 'default'}">
                <h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="默认排序"/>
            </li>
            <li class="col-md-2" style="list-style: none" onclick="sortByDefault(this)" id="paixu" th:unless="${select.order eq 'default'}">
                <h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="默认排序"/>
            </li>
            <li class="col-md-2" style="list-style: none; background: lightgreen" onclick="sortByRank(this)" id="pingfen" th:if="${select.order eq 'rank'}">
                <h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="星级"/>
            </li>
            <li class="col-md-2" style="list-style: none" onclick="sortByRank(this)" id="pingfen" th:unless="${select.order eq 'rank'}">
                <h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="星级"/>
            </li>
        </ul>
    </div>
    <div class="container" style="padding-left: 25px">
        <hr style="background-color: lightgreen; height: 2px; margin: unset; border: unset">
    </div>
</div>

<!-- 经纪人列表 -->
<div class="container">
    <div class="">
        <h3><b>共找到</b><span style="color: #34ce57" th:text="${pageDTO.page.total}">46640</span><b>位经纪人</b></h3>
    </div>
</div>
<div class="container" style="padding-left: 25px">
    <hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset">
</div>
<div class="container">

    <div th:each="agent : ${pageDTO.result}" class="row">
        <div class="col-md-6">
            <ul>
                <li  class="row" style="list-style: none; padding: 30px">
                    <img class="col-md-3" th:src="${agent.picture}" src="YangKai.jpg" style="padding-top: 20px">
                    <div class="col-md-8">
                        <h3><a style="color: black; text-decoration: none; font-weight: bold" href="#4" th:href="@{'/agent_detail?agentId='+${agent.agentId}}" th:text="${agent.agentName}">杨凯</a></h3>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>主营模块：</span>
                                <a style="color: black; text-decoration: none" href="#4">中德英伦联邦A区</a>
                            </h5>
                        </div>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>所属门店：</span>
                                <span th:text="${agent.belongShop}">三千里店</span>
                            </h5>
                        </div>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>工作时间：</span>
                                <span th:text="${agent.workingTime+'年'}">3年</span>
                            </h5>
                        </div>
                    </div>
                </li>
                <hr style="background-color: aliceblue; height: 2px; width: 1130px; margin: unset; border: unset">
            </ul>
        </div>
        <div class="col-md-3" style="padding-top: 40px">
            <div class="container" style="list-style: none">
                <h5 style="color: #db4c3f; display: inline">综合评分：</h5>
                <h2 style="color: #db4c3f; font-weight: bold; display: inline" th:text="${agent.rank}">5.0</h2>
            </div>
            <div class="container" style="display: block; list-style: none">评论<h5 style="display: inline">86</h5>条</div>
        </div>
        <div class="col-md-3" style="padding-top: 40px">
            <div class="container" style="list-style: none">
                <h2 style=" font-weight: bold; display: inline" th:text="${agent.telephone}">4008959600转9612</h2>
            </div>
            <div class="container" style="display: block; list-style: none">联系方式
            </div>
        </div>
    </div>

</div>
<!-- 分页条 -->
<div class="container">
    <div class="row">
        <nav style="text-align: right" aria-label="Page navigation">
            <ul class="pagination">
                <li th:unless="${pageDTO.page.hasPrevious()}">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true" th:text="首页"></span>
                    </a>
                </li>
                <li th:if="${pageDTO.page.hasPrevious()}">
                    <a aria-label="Previous" onclick="firstPage()">
                        <span aria-hidden="true" th:text="首页"></span>
                    </a>
                </li>

                <li th:unless="${pageDTO.page.hasPrevious()}">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:if="${pageDTO.page.hasPrevious()}">
                    <a aria-label="Previous" onclick="prePage()">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li ><a style="color: black" th:text="' 第 '+${pageDTO.page.getCurrent()}+' 页/共 '+${pageDTO.page.getPages()}+' 页 '"/></li>
                <li th:unless="${pageDTO.page.hasNext()}">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <li th:if="${pageDTO.page.hasNext()}">
                    <a aria-label="Next" onclick="nextPage()">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <li th:unless="${pageDTO.page.hasNext()}">
                    <a href="#">
                        <span aria-hidden="true" th:text="末页"></span>
                    </a>
                </li>

                <li th:if="${pageDTO.page.hasNext()}">
                    <a aria-label="Next" onclick="lastPage()">
                        <span aria-hidden="true" th:text="末页"></span>
                    </a>
                </li>

                <script th:inline="javascript" >
                    function nextPage() {
                        var form = document.getElementById("select_form");
                        document.getElementById("select_form").action='/agent_list?page=' + '[[${pageDTO.page.getCurrent()+1}]]';
                        form.submit();
                    }
                    function prePage() {
                        var form = document.getElementById("select_form");
                        document.getElementById("select_form").action='/agent_list?page=' + '[[${pageDTO.page.getCurrent()-1}]]';
                        form.submit();
                    }
                    function firstPage() {
                        var form = document.getElementById("select_form");
                        form.action='/agent_list';
                        form.submit();
                    }
                    function lastPage() {
                        var  form = document.getElementById("select_form");
                        form.action='agent_list?page='+'[[${pageDTO.page.getPages()}]]';
                        form.submit();
                    }

                </script>
            </ul>
        </nav>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>